<template>
  <el-dialog title="修改地址" :visible="showEdit" @close="close">
    <el-form label-width="120px" :model="form" :rules="rules" ref="form">
      <el-form-item label="省市区/县" prop="city">
        <el-cascader
          :options="cityOptions"
          expand-trigger="hover"
          style="width: 100%"
          v-model="form.city"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="district">
        <el-input placeholder="请输入详细地址" v-model="form.district"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="confirm">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import cityOptions from '@/api/citys'
export default {
  props: {
    showEdit: {
      type: Boolean,
      default: false
    },
    editId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      cityOptions,
      form: {
        city: [],
        district: ''
      },
      rules: {
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        district: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    close () {
      this.form = {
        city: [],
        district: ''
      }
      this.$refs.form.resetFields()
      this.$emit('update:showEdit', false)
    },
    async confirm () {
      try {
        await this.$refs.form.validate()
        this.$message.success(`${this.form.city.join('/')}/${this.form.district}`)
        this.$emit('update:showEdit', false)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>
</style>
